<template>
  <div class="global-container">
    <div class="form-main">
      <el-form :model="formData" ref="form" label-width="160px" class="form">
        <el-divider>个人基本信息</el-divider>
        <el-form-item label="姓名">
          {{ $store.state.user.userInfo.realname }}
        </el-form-item>
        <el-form-item :label="paperCodeLabel">
          {{ $store.state.user.userInfo.paperCode }}
        </el-form-item>
        <el-form-item label="联系手机"> {{ phone }} </el-form-item>
        <el-form-item
          label="证件照"
          prop="idPhoto.id"
          :rules="$validate.required()"
        >
          <Upload
            v-model="formData.idPhoto"
            businessTable="SYS_USER"
            :businessId="userId"
            subType="idPhoto"
            :minSize="10"
            :maxSize="200"
            @change="$refs.form.validateField('idPhoto.id')"
          />
          <el-alert
            title="上传大小为：10~200KB ， 建议上传证件照建议5:7比例"
            type="warning"
            show-icon
            :closable="false"
          />
        </el-form-item>
        <el-form-item
          label="签名照"
          prop="signPhoto.id"
          :rules="$validate.required()"
        >
          <Upload
            v-model="formData.signPhoto"
            businessTable="SYS_USER"
            :businessId="userId"
            subType="signPhoto"
            :maxSize="50"
            @change="$refs.form.validateField('signPhoto.id')"
          />
          <el-alert
            title="上传大小为：0~50KB ， 建议上传签名照建议45:11比例"
            type="warning"
            show-icon
            :closable="false"
          />
        </el-form-item>
        <el-form-item
          label="联系人地址"
          prop="county"
          :rules="$validate.required('change')"
        >
          <AreaSelect :form="formData" />
        </el-form-item>
        <el-form-item
          prop="address"
          label="详细地址"
          :rules="$validate.maxLength(true, 0, 100)"
        >
          <el-input v-model.trim="formData.address"></el-input>
        </el-form-item>
        <el-form-item
          label="联系人邮编"
          prop="postalCode"
          :rules="$validate.maxLength(true, 0, 10)"
        >
          <el-input v-model.trim="formData.postalCode"></el-input>
        </el-form-item>
        <el-form-item
          label="电子邮箱"
          prop="email"
          :rules="$validate.email(true)"
        >
          <el-input v-model.trim="formData.email"></el-input>
        </el-form-item>
        <el-form-item
          label="传真"
          prop="fax"
          :rules="$validate.maxLength(false, 0, 50)"
        >
          <el-input v-model.trim="formData.fax"></el-input>
        </el-form-item>
        <el-divider>职称及最高学历信息</el-divider>
        <el-form-item
          label="职称级别"
          prop="titleLevel"
          :rules="$validate.required('change')"
        >
          <Aselect
            v-model="formData.titleLevel"
            :options="$dict('title_level').list()"
          />
        </el-form-item>
        <el-form-item
          label="毕业院校"
          prop="school"
          :rules="$validate.maxLength(true, 0, 50)"
        >
          <el-input v-model.trim="formData.school"></el-input>
        </el-form-item>
        <el-form-item
          label="毕业时间"
          prop="graduatedTime"
          :rules="$validate.required()"
        >
          <AdatePicker v-model="formData.graduatedTime" :clearable="false" />
        </el-form-item>
        <el-form-item
          label="专业"
          prop="major"
          :rules="$validate.maxLength(true, 0, 50)"
        >
          <el-input v-model.trim="formData.major"></el-input>
        </el-form-item>
        <el-form-item
          label="学历"
          prop="education"
          :rules="$validate.required('change')"
        >
          <Aselect
            v-model="formData.education"
            :options="$dict('education').list()"
          />
        </el-form-item>
        <el-form-item
          label="学位"
          prop="degree"
          :rules="$validate.required('change')"
        >
          <Aselect
            v-model="formData.degree"
            :options="$dict('degree').list()"
          />
        </el-form-item>
      </el-form>
    </div>
    <el-button type="primary" @click="submitForm">提交修改</el-button>
  </div>
</template>
<script>
import Upload from '@/components/Upload/Upload';
import Aselect from '@/components/Select/Aselect';
import AdatePicker from '@/components/TimePicker/AdatePicker';
import AreaSelect from '@/components/AreaSelect/AreaSelect';
import userApi from '@/api/user';
import { decrypt } from '@/utils/sms4util';

export default {
  components: {
    Upload,
    Aselect,
    AreaSelect,
    AdatePicker,
  },
  data() {
    return {
      formData: {
        idPhoto: {},
        signPhoto: {},
      },
    };
  },
  computed: {
    userId() {
      return this.$store.state.user.userInfo.id;
    },
    userType() {
      return this.$store.state.user.userInfo.userType;
    },
    phone() {
      let phone = this.$store.state.user.userInfo.phone;
      const tel = phone.substr(0, 3) + '****' + phone.substr(-4, 4);
      return tel;
    },
    paperCodeLabel() {
      let paperType = this.$store.state.user.userInfo.paperType;
      const obj = {
        111: '身份证',
        '001': '社会保障号',
        516: '港澳居民来往大陆通行证编号',
        511: '台湾居民来往大陆通行证编号',
        414: '普通护照编号',
        411: '外国人永久居留证或永久居留许可编号',
      };
      return obj[paperType];
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      let params = {
        id: this.userId,
        type: this.userType,
      };
      const res = await userApi.getUserInfo(params);
      // if (!res.id) {
      //   return;
      // }
      this.formData = {
        ...this.formData,
        ...res,
        phone: res.phone ? decrypt(res.phone) : '',
        paperCode: res.paperCode ? decrypt(res.paperCode) : '',
      };
      const formTimer = setTimeout(() => {
        this.$refs.form.clearValidate();
        clearTimeout(formTimer);
      }, 0);
    },
    async submitForm() {
      try {
        await this.$validate.checkValidate(this.$refs.form);
        let params = {
          ...this.formData,
          userType: this.userType,
        };
        await userApi.editUserInfo(params);
        this.$message.success('修改成功');
        this.$store.state.user.userInfo.isCompleteInfo = '1';
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.global-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.form-main {
  width: 700px;
}
::v-deep {
  .el-alert__content {
    line-height: 16px;
  }
}
</style>
